<!DOCTYPE HTML>
<html>
<head>
<title>翻转菜单</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' media="all" />
<link href="css/style.css" rel='stylesheet' type='text/css' media="all" />
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<link href="css/component.css" rel="stylesheet" type="text/css"  />
</head>
<body class="cbp-spmenu-push">
		<nav class="navbar navbar-default">
		  <div class="container-fluid">
		    <div class="navbar-header">
		       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
			        <span class="sr-only">Toggle navigation</span>
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
		       </button>
		    </div>
		    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		      <ul class="nav navbar-nav ">
		      	<li><a href="" class="navbar-brand"><img src="images/logo.png" height="22px" width="90px"/></a></li>
		        <li><a href="index.html">主页<span class="sr-only">(current)</span></a></li>
		        <li><a href="menu.html">菜单价格<span class="sr-only">(current)</span></a></li>
		        <li class="active"><a href="events.html">翻折菜单<span class="sr-only">(current)</span></a></li>
		        <li><a href="gallery.html">平铺菜单<span class="sr-only">(current)</span></a></li>		
		      </ul>     
		    </div>
		 </div>
		</nav>
						<script src="js/classie.js"></script>
						<script>
						var menuRight = document.getElementById( 'cbp-spmenu-s2' ),
						showRightPush = document.getElementById( 'showRightPush' ),
						body = document.body;

						showRightPush.onclick = function() {
							classie.toggle( this, 'active' );
							classie.toggle( body, 'cbp-spmenu-push-toleft' );
							classie.toggle( menuRight, 'cbp-spmenu-open' );
							disableOther( 'showRightPush' );
						};

						function disableOther( button ) {
							if( button !== 'showRightPush' ) {
								classie.toggle( showRightPush, 'disabled' );
							}
						}
					 </script>
					<div class="clearfix"> </div>
				</div>
			</div>
	</div>
	<!--/header-->
		<div class="services">
				<div class="container">
					<h3>我们的美食</h3>
					<div class="featured-main events-featured-main">
						<div class=" col-md-3 feature-text">
							<a href="#"><img src="images/f1.jpg" alt=""></a>
							<div class="feature-text-grids">
								<div class="feature-text-left">
									<img src="images/7.png" alt="" />
								</div>
								<div class="feature-text-right">
									<h3>food</h3>
									<p>来我的怀里或者让我住进你的胃里</p>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>
						<div class=" col-md-3 feature-text">
							<a href="#"><img src="images/f2.jpg" alt=""></a>
							<div class="feature-text-grids">
								<div class="feature-text-left">
									<img src="images/13.png" alt="" />
								</div>
								<div class="feature-text-right">
									<h3>food</h3>
									<p>爱，就是在一起，吃好多好多顿饭</p>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>
						<div class=" col-md-3 feature-text">
							<a href="#"><img src="images/f3.jpg" alt=""></a>
							<div class="feature-text-grids">
								<div class="feature-text-left">
									<img src="images/25.png" alt="" />
								</div>
								<div class="feature-text-right">
									<h3>food</h3>
									<p>再简单的食物都有自己的灵魂，人生有很多味道无法复制</p>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>								
						<div class=" col-md-3 feature-text">
							<a href="#"><img src="images/f4.jpg" alt=""></a>
							<div class="feature-text-grids">
								<div class="feature-text-left">
									<img src="images/18.png" alt="" />
								</div>
								<div class="feature-text-right">
									<h3>food</h3>
									<p>浓情蜜意，像汤匙尖尖那么多正好</p>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="featured-main events-featured-main">
						<div class=" col-md-3 feature-text">
							<a href="#"><img src="images/f3.jpg" alt=""></a>
							<div class="feature-text-grids">
								<div class="feature-text-left">
									<img src="images/25.png" alt="" />
								</div>
								<div class="feature-text-right">
									<h3>food</h3>
									<p>世间最美的情话莫过于你吃饱了吗</p>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>
						<div class=" col-md-3 feature-text">
							<a href="#"><img src="images/f4.jpg" alt=""></a>
							<div class="feature-text-grids">
								<div class="feature-text-left">
									<img src="images/18.png" alt="" />
								</div>
								<div class="feature-text-right">
									<h3>food</h3>
									<p>有情饮水饱,满堂盛宴不如与你一碗细面</p>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>
						<div class=" col-md-3 feature-text">
							<a href="#"><img src="images/f1.jpg" alt=""></a>
							<div class="feature-text-grids">
								<div class="feature-text-left">
									<img src="images/7.png" alt="" />
								</div>
								<div class="feature-text-right">
									<h3>food</h3>
									<p>我会想你，在每一碗我们一起吃过的食物前</p>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>								
						<div class=" col-md-3 feature-text">
							<a href="#"><img src="images/f2.jpg" alt=""></a>
							<div class="feature-text-grids">
								<div class="feature-text-left">
									<img src="images/13.png" alt="" />
								</div>
								<div class="feature-text-right">
									<h3>food</h3>
									<p>番茄和西红柿 土豆和马铃薯 我喜欢的人和你</p>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="clearfix"> </div>
				</div>					
		</div>
		<div class="featured-section">
					<div class="container">
						<h2>我们的美食</h2>
							<div class="featured-main">
								<div class=" col-md-4 feature-text">
									<img src="images/f1.jpg" alt="">
									<h3>美食色香味俱全，好想大快朵颐。美食香气四溢，油亮清脆，好有胃口</h3>
										<p>妈妈熬的鸡汤，白色的，很香，咸味，很好喝。每次妈妈做鸡汤，我都拿个小勺子喝，喝一口，品品味，再咽下去，再喝一口，再品品味，再咽下去，再喝一口，再品品味，再咽下去，再喝一口，再品品味，再咽下去</p>
									</div>
									<div class=" col-md-4 feature-text">
										<img src="images/f3.jpg" alt="">
									<h3>美食色香味俱全，好想大快朵颐。美食香气四溢，油亮清脆，好有胃口</h3>		
										<p>妈妈熬的鸡汤，白色的，很香，咸味，很好喝。每次妈妈做鸡汤，我都拿个小勺子喝，喝一口，品品味，再咽下去，再喝一口，再品品味，再咽下去，再喝一口，再品品味，再咽下去，再喝一口，再品品味，再咽下去</p>
									</div>	
									<div class="col-md-4 feature-accord event-feature-accord">
								<ul class="topic_grid">
								   <li class="list1"><h3 class="m_3">详细介绍</span></h3><div class="clear5"></div></li>
								 </ul>
								  <div class="menu_vertical">
					         	 	<section class="accordation_menu">
									  <div>
									    <input id="label-1" name="lida" type="radio" checked/>
									   <label for="label-1" id="item1"><i class="ferme"> </i><span class="m_5">美食1</span><i class="icon-plus-sign i-right1"></i><i class="icon-minus-sign i-right2"></i></label>
									    <div class="content" id="a1">
									      <ul class="news_list">
											 <li class="date_desc">
							  			   	 	<p>
							  			   	 		并刀如水，吴盐胜雪，纤手破新橙。锦幄初温，兽烟不断，相对坐调笙。
													低声问向谁行宿，城上已三更。马滑霜浓，不如休去，直是少人行
							  			   	 	</p>
							  			   	 </li>
							  			   	 <div class="clearfix"> </div>
							  			  </ul>
									    </div>
									  </div>
									  <div>
									    <input id="label-2" name="lida" type="radio"/>
									    <label for="label-2" id="item2"><i class="icon-leaf" id="i2"></i>美食2<i class="icon-plus-sign i-right1"></i><i class="icon-minus-sign i-right2"></i></label>
									    <div class="content" id="a2">
									       <ul class="news_list">
											 <li class="date_desc">
							  			   	 	<p>
							  			   	 		并刀如水，吴盐胜雪，纤手破新橙。锦幄初温，兽烟不断，相对坐调笙。
													低声问向谁行宿，城上已三更。马滑霜浓，不如休去，直是少人行
							  			   	 	</p>
							  			   	 </li>
							  			   	 <div class="clearfix"> </div>
							  			  </ul>      
									    </div>
									  </div>
									  <div>
									    <input id="label-3" name="lida" type="radio"/>
									    <label for="label-3" id="item3"><i class="icon-trophy" id="i3"></i>美食3<i class="icon-plus-sign i-right1"></i><i class="icon-minus-sign i-right2"></i></label>
									    <div class="content" id="a3">
									       <ul class="news_list">
							  			     <li class="date_desc">
							  			   	 	<p>
							  			   	 		并刀如水，吴盐胜雪，纤手破新橙。锦幄初温，兽烟不断，相对坐调笙。
													低声问向谁行宿，城上已三更。马滑霜浓，不如休去，直是少人行
							  			   	 	</p>
							  			   	 </li>
							  			   	 <div class="clearfix"> </div>
							  			  </ul>
									    </div>
									  </div>
									   <div>
									    <input id="label-4" name="lida" type="radio"/>
									    <label for="label-4" id="item4"><i class="icon-trophy" id="i4"></i>美食4<i class="icon-plus-sign i-right1"></i><i class="icon-minus-sign i-right2"></i></label>
									    <div class="content" id="a4">
									       <ul class="news_list">
							  			     <li class="date_desc">
							  			   	 	<p>
							  			   	 		并刀如水，吴盐胜雪，纤手破新橙。锦幄初温，兽烟不断，相对坐调笙。
													低声问向谁行宿，城上已三更。马滑霜浓，不如休去，直是少人行
							  			   	 	</p>
							  			   	 </li>
							  			   	 <div class="clearfix"> </div>
							  			  </ul>
									    </div>
									  </div>
									   <div>
									    <input id="label-5" name="lida" type="radio"/>
									    <label for="label-5" id="item5"><i class="icon-trophy" id="i5"></i>美食5<i class="icon-plus-sign i-right1"></i><i class="icon-minus-sign i-right2"></i></label>
									    <div class="content" id="a5">
									       <ul class="news_list">
							  			     <li class="date_desc">
							  			   	 	<p>
							  			   	 		并刀如水，吴盐胜雪，纤手破新橙。锦幄初温，兽烟不断，相对坐调笙。
													低声问向谁行宿，城上已三更。马滑霜浓，不如休去，直是少人行
							  			   	 	</p>
							  			   	 </li>
							  			   	 <div class="clearfix"> </div>
							  			  </ul>
									    </div>
									  </div>
									</section>

									</div>
								</div>
							</div>
						</div>	
		</div>	                                                            
	<div id="bottom" class="panel-footer">
		<p style="text-align: center;">
			Copyright © 2018.Company name All rights reserved.More Templates
			<img src="images/footer-icons.png"/>			
		</p>		
	</div>
</body>
</html>